<template>
	<view class="my-project-box" :style="'padding-top:'+(barHeight)+'px'">
		<NavBar left-icon="undo-filled" @onLeftIcon="back">
			<template v-slot:center>
				<view class="nav_center">
					<view>我的项目</view>
				</view>
			</template>
		</NavBar>
		<div class='project-list-box'>
			<div class='list' v-if="projectEntities">
				<div class='item' v-for="(project, index) in projectEntities" :key="index">
					<div class='top'>
						<div class='number-box line'>
							<div class='project-number'>{{project.projectNumber}}</div>
							<div class='status'>
								<uni-tag :text="project.executeStatus"
									:type="project.executeStatus == '正常' ? 'primary' : 'error'" />
							</div>
						</div>
						<div class='name-box line'>{{project.projectName}}</div>
						<div class='partner-box line'>{{project.companyName}}</div>
						<div class='user-box line'>
							<div class='user'>{{project.pmUserName}}</div>
							<div class='user'>{{project.name}}</div>
							<div class="user"
								:class='project.status==0?"executeStatus":(project.status==1?"execute":(project.status==2?"execute":""))'>
								{{project.status==0?'未开始':(project.status==1?'执行中':(project.status==2?'已完成':'已结算'))}}
							</div>
						</div>
						<div class='contract line'>{{project.contractTitle}}</div>
						<div class='product line'>{{project.productName}}</div>
					</div>
					<div class='createTime'>
						<view>
							<text class="iconfont icon-rili"></text>创建时间：
							<uni-dateformat :date="project.createTime" format='yyyy-MM-dd hh:mm:ss'></uni-dateformat>
						</view>
						<view>
							<uni-tooltip placement="top">
								<view @click="empower(project)">授权</view>
							</uni-tooltip>
						</view>
					</div>
				</div>
			</div>
			<uni-load-more iconType="circle" v-if="projectEntities.length" :status="loadingStatus"></uni-load-more>
			<o-empty v-else bg="#f3f3f3"></o-empty>
		</div>
		<!-- 授权 -->
		<view class="bottom-modal-box">
			<uni-popup ref="user" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in userEntities" @click="loadUser(data)"
						:style="data.isUsed==0?'background:#2196f3;color: #fff':''">
						{{data.name}}
					</view>
				</view>
				<view class="user-boxs">
					<text v-if="queryProjectUesr.length > 0">[</text>
					<view v-for="(user, index) in queryProjectUesr">
						{{user.name}}
						<text v-if="index != queryProjectUesr.length-1">，</text>
					</view>
					<text v-if="queryProjectUesr.length > 0">]</text>
				</view>
				<button type="primary" style="margin: 10px;" @click="saveProjectUser">确定</button>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	import NavBar from '@/components/NavBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				projectEntities: [],
				count: 0,
				page: 1,
				limit: 10,
				loadingStatus: 'more',
				userEntities: [],
				projectEntity: {}, // 点击要授权的项目
				queryProjectUesr: [], // 绑定的用户
				barHeight: 0
			}
		},
		created() {
			this.queryList()
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45;
		},
		methods: {
			back() {
				uni.switchTab({
					url: '/pages/user/User'
				})
			},
			async queryList() {
				let project = {
					page: this.page,
					limit: this.limit
				}
				let res = await post(api.MyProjectList, project)
				this.count = res.count
				this.loadingStatus = "more"
				this.projectEntities = [...this.projectEntities, ...res.data]
			},
			//上拉刷新处理
			async onReach() {
				if (this.projectEntities.length >= this.count) {
					return (this.loadingStatus = "no-more")
				}
				this.page++
				this.loadingStatus = "loading"
				await new Promise((resolve) => setTimeout(resolve, 300))
				await this.queryList()
			},
			// 授权
			empower(project) {
				post(api.UserEntities, {}).then(res => {
					this.userEntities = res.data
					this.projectEntity = project
					this.queryProjectUesr = []
					this.queryEmpowerUser(project)
					this.$refs.user.open('bottom')
				})
			},
			// 选择要授权的用户
			loadUser(data) {
				this.queryProjectUesr.push(data)
			},
			// 保存授权关系
			saveProjectUser() {
				let userVos = []
				this.queryProjectUesr.forEach(function(item, index) {
					let userVo = {
						id: item.id
					}
					userVos.push(userVo)
				})
				let projectUserVo = {
					projectId: this.projectEntity.id,
					userVos: userVos
				}
				post(api.SaveProjectUser, projectUserVo).then(res => {
					this.$refs.user.close()
				})
			},
			// 查询授权关系
			async queryEmpowerUser(project) {
				let res = await post(api.ProjectUserList, {
					projectId: project.id
				})
				// 将查询到的结果与所有用户对比
				this.userEntities.forEach(function(item, index) {
					res.data.forEach(function(it, k) {
						if (item.id == it.userId) {
							// item回显换色
							item.isUsed = 0
						}
					})
				})
			}
		}
	}
</script>

<style>
	@import '../../../static/css/ProjectList.css';

	.bottom-modal-box .popup-content {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20px 10px 0;
		font-size: 12px;
		max-height: 80vh;
		overflow-y: auto;
	}

	.bottom-modal-box .popup-content .item {
		width: 48%;
		background: #fff;
		border-right: 5px;
		transition: all .3s ease 0s;
		margin: 0 2% 10px 0;
		cursor: pointer;
		position: relative;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #eee;
	}

	.bottom-modal-box .item:nth-child(2n) {
		margin-right: 0 !important;
	}
	.user-boxs{
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 12px;
		padding: 0 10px;
		height: 30px;
		overflow-y: auto;
	}
</style>